<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <span>没有防抖</span><input id="unDebounce"/>
  <br/>
  <span>防抖</span><input id="debounce"/>
  <br/>
  <span>节流</span><input id="throttle"/>
  <script>
    {
      // 没有加任何措施
      // 每次keyup都会触发回调方法进行打印
      let input = document.getElementById('unDebounce')
      function ajax(content) {
        console.info("没有加防抖 -----> ", content)
      }

      input.addEventListener('keyup', function (e) {
          ajax(e.target.value)
      })
    }
  </script>
  <script>
    {
      // 防抖
      // 1.keyup事件被触发后，1s后再执行方法
      // 2.在等待的1s内，如果事件再次被触发，清空当前等待；重新记时
      let input = document.getElementById('debounce')
      function ajax(content) {
        console.info("防抖 -----> ", content)
      }
      const debounce = (fn, delay) => {
        let timer; // 定时器id
        return (args) => {
          clearTimeout(timer)
          timer = setTimeout(() => {
            fn(args)
          }, delay);
        }
      }

      let debounceAjax = debounce(ajax, 1000)
      
      input.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
      })
    }
  </script>
  <script>
    {
      // 节流
      // 在一个单位时间内，只会触发一次函数
      let input = document.getElementById('throttle');
      function ajax(content) {
        console.info("节流 -----> ", content)
      }
      // 时间戳版
      function throttle1(fn, delay) {
        let last; // 上次执行的时间
        return function(arg) {
          const now = new Date().valueOf(); // 当前时间
          if (!last) { // 第一次执行
            last = now;
            fn(arg);
          } else if (now >= last + delay) { // 超过delay时间段，可以执行
            last = now;
            fn(arg);
          }
        }
      }

      // 定时器版
      function throttle(fn, delay) {
        let timer = null;
        return function(arg) {
          if (!timer) { // 可以执行
            fn(arg)
            timer = setTimeout(() => {
              timer = null;
            }, delay);
          }
        }
      }

      const throttleAjax = throttle(ajax, 1000);
      input.addEventListener('keyup', function (e) {
        throttleAjax(e.target.value)
      })

    }
  </script>
</body>
</html>